<template lang="pug">
.app-container
  - var str = "Thank you for your letter";
  .main
      h1.title
          each val in str
              span.letter= val
              
  .container
    .beauty-container
      .beauty-card
      .beauty-card
      .beauty-card
      .beauty-card-parent
        .beauty-card-cover
        .beauty-card-label 信封(Envelope)

  
</template>

<script>


export default {
  name: 'Envelope',
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container {
  width: 100%;
  height: 50vh;
  position: relative;
}
.beauty-container {
  position: absolute;
  top: 35%;
  left: 6%;
  width: 300px;
  height: 200px;
  background-color: burlywood  ;
  box-shadow: inset 100px 0 10px 5px  rgba(0,0,0,0.4);
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  perspective: 1000px;
  perspective-origin: bottom;
  &:hover {
    .beauty-card-parent {
      left: -20px;
      .beauty-card-cover {
        opacity: 0;
        right: -20px;
        transform: rotateY(180deg);
      }
    }

   .beauty-card:nth-child(3) {
     left: 350px;
     top: -40px;
     transition-delay: 1.5s;
   }
    .beauty-card:nth-child(2) {
      left: 550px;
      top: -50px;
      transition-delay: 1.25s;
    }
    .beauty-card:nth-child(1) {
      left: 750px;
      top: -60px;
      transition-delay: 1s;
    }
    .beauty-card {
      height: 280px !important;
      box-shadow: 0 10px 15px 1px rgba(31, 56,108, 0.4);
      &:hover {
        transition: .1s all;
        z-index: 1;
        transform: scale(1.2);
        position: absolute;
      }
    }
  }
}
.beauty-card-parent {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: burlywood;
  transition: 0.5s all !important;

  .beauty-card-cover {
    position: absolute;
    top: 0;
    right: 0;
    width:20px;
    transition: 0.3s all;
    height: 99%;
    background-color: burlywood;
    border: 1px solid rgba(80,120,120, 0.5);
    border-right: none;
    box-shadow:  -6px 0 5px -4px rgba(80,120,120, 0.5);
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  &:hover {
    box-shadow:  10px 0 5px -4px rgba(80,120,120, 0.5);
  }

  .beauty-card-label {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: inherit;
    font-size: 24px;
    font-family: "Lucida Sans Typewriter", sans-serif;
    color: white;
    text-align: center;
    box-sizing: border-box;
    padding: 10px;
  }
}
.beauty-card {
  position: absolute;
  top:10px;
  left: 0;
  transition: 0.5s all;
  width: 89%;
  height: 95%;
  transform: scale(0.9);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
 
  &:nth-child(1){
    background-image:url("https://loremflickr.com/320/240/paris?random=1");
  }
    &:nth-child(2){
    background-image:url("https://loremflickr.com/320/240/brazil,rio?random=2");
  }
    &:nth-child(3){
    background-image:url("https://loremflickr.com/320/240/museum?random=3");
  }
}


$background_color: #000;
$text_color: red;

//The number of characters in the HTML/Pug string (even spaces)
//"Text Introduction Animation" = 27
$character_count: 27;

//Speeds
$animation_speed: 1.4s;
$animation_delay_delta: 10;

//The value you want all letters to start from on the X axis
//If singular value (i.e. 0) all X values will begin at the same position
//If list (i.e. (-100vw, 100vw)) half of the letters will begin at -100vw and the latter half at 100vw
//E.g. value: 100vw OR list: (-100vw, 100vw)
$from_X: 0;

//The value you want all letters to start from on the Y axis
//If singular value (i.e. 0) all Y values will begin at the same position
//If list (i.e. (-100vh, 100vh)) half of the letters will begin at -100vh and the latter half at 100vh
//E.g. value: 100vh OR list: (-100vh, 100vh)
$from_Y: 150px;

/**
 * Helper to get letter position at each index ($i) given a value ($from_X or $from_Y)
 * @function getLetterPosition
 * @param $val [default:0] - value: 100vh OR list: (-100vw, 100vw)
 * @param $i [default:0] - Index of $letter_count during the loop
 * @return position
 */
@function getLetterPosition($val:0, $i:0) {
    $pos: 0;
    
    //Checks if we have 1 number value or a list (i.e. (-100vh, 100vh))
    @if length($val) == 1 {
        //If has length of 1, return the normal value (all letters values will be this value)
        $pos: $val;
    }
    @else if length($val) == 2 {
        //Check if we're halfway through our string
        @if $i < $character_count / 2 {
            //If we are, then use the first value in the list
            $pos: nth($val, 1);
        }
        @else {
            //Else, we are in the second half of the string, use the last value in the list
            $pos: nth($val, 2);
        }
    }
    
    @return round($pos);
};

.title {
    display:block;
    color: #fff;
}

.letter {
    display: inline-block;
    min-width: 8px; //Min width of each letter to account for spaces
    color: rgba($text_color, 0);
    filter: blur(5px);
}

//Cycle through letters to individually set transforms, animation
@for $i from 1 through $character_count {
	.letter:nth-of-type(#{$i}) {
        $pos_x: getLetterPosition($from_X, $i);
        $pos_y: getLetterPosition($from_Y, $i);
        
        $delay: ($i / $animation_delay_delta) + s;
        
        transform: translate($pos_x, $pos_y) scale(7.5);
        animation: $animation_speed ease-out letterAnimationIn $delay 1 forwards;
    }
}

@keyframes letterAnimationIn {
    to {
        color: rgba($text_color, 1);
        transform: none;
        filter: none;
    }
}


//
// Page Default Styles
//


// html,
// body {
//     display: block;
//     position: fixed;
// 	height: 100vh;
// 	width: 100vw;
//     background-color: $background_color;
//     background: linear-gradient(#1F1F21, $background_color);
// }

.main {
	display: flex;
	height: 30vh;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
</style>
